<template>
  <div id="app">
    <router-view v-if="isLoad" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      // 静默刷新默认给需要更新的dom元素中添加v-if=布尔值，默认为ture，
      // 原理：v-if如果为真实则重新渲染一便页面，相当于为把页面重新渲染了一遍
      isLoad: true
    }
  },
  // 使用高阶组件向低阶组件传值的provide和inject方法
  // provide可以用于传递data与methods的东西也可以传this
  provide () {
    return {
      onLoad: this.onLoad
    }
  },
  // 低阶组件接收时用inject接收:inject:[属性名]
  methods: {
    // 定义一个方法，来实现静默刷新
    onLoad () {
      // 先销毁组件
      this.isLoad = false
      this.$nextTick(() => {
        // 还原组件
        this.isLoad = true
      })
    }
  },
  created () {
    // console.dir(this.$router)
  }
}
</script>
